<template>
    <view class="sale-filter-container">
        <view class="title">筛选条件</view>
        <view class="range-time">
            <view class="text">起止时间</view>
            <choose-date
                ref="chooseDatePanel"
                class="choose-date"
                :startDate="startDate"
                :endDate="endDate"
                :isFilter="true"
                @selDate="selDate">
            </choose-date>
        </view>
        <view class="sales-man">
            <view class="text">业务员</view>
            <view class="select-wrapper" @click="handleSelectSalesman">
                <view class="text" :class="{ 'has-salesman': selectedSalesman }">{{
                    selectedSalesman ? selectedSalesman.FullName : "请选择业务员"
                }}</view>
                <iconsfont customIcons="icon-xialaxuanze" size="32"></iconsfont>
            </view>
        </view>
		<view class="sales-man">
		    <view class="text">客户</view>
		    <view class="select-wrapper" @click="openCustomDrawer">
		        <view class="text text-show-line-1" :class="{ 'has-salesman': getFinalCustom }">{{
		            getFinalCustom ? getFinalCustom : "请选择客户"
		        }}</view>
		        <iconsfont customIcons="icon-xialaxuanze" size="32"></iconsfont>
		    </view>
		</view>
		<view class="sales-man">
		    <view class="text">项目</view>
		    <view class="select-wrapper" @click="openProjectDrawer">
		        <view class="text text-show-line-1" :class="{ 'has-salesman': getProjectName }">{{
		            getProjectName ? getProjectName : "请选择项目"
		        }}</view>
		        <iconsfont customIcons="icon-xialaxuanze" size="32"></iconsfont>
		    </view>
		</view>
		<view class="sales-man">
		    <view class="text">销售组织</view>
		    <view class="select-wrapper" @click="openMarketingDrawer">
		        <view class="text text-show-line-1" :class="{ 'has-salesman': getMarketingName }">{{
		            getMarketingName ? getMarketingName : "请选择销售组织"
		        }}</view>
		        <iconsfont customIcons="icon-xialaxuanze" size="32"></iconsfont>
		    </view>
		</view>
        <uni-drawer ref="showRight" mode="right" :width="320">
            <drawer-container @reset="handleReset" @sure="handleSure">
                <choose-salesman />
            </drawer-container>
        </uni-drawer>
		<uni-drawer ref="showRightCustom" mode="right" :width="320">
		    <drawer-container @reset="handleResetCustom" @sure="handleSureCustom">
		        <custom-content />
		    </drawer-container>
		</uni-drawer>
		<uni-drawer ref="showRightProject" mode="right" :width="320">
			<drawer-container @reset="handleResetProject" @sure="handleSureProject">
				<project-content />
			</drawer-container>
		</uni-drawer>
		<uni-drawer ref="showRightMarketing" mode="right" :width="320">
			<drawer-container @reset="handleResetMarketing" @sure="handleSureMarketing">
				<marketing-content />
			</drawer-container>
		</uni-drawer>
    </view>
</template>

<script>
import { CHANGE_DATE,CHANGE_CUSTOM_SEARCH_VAL, CHANGE_CUSTOM_SELECTED,CHANGE_PROJECT_SEARCH_VAL,CHANGE_PROJECT_SELECTED,CHANGE_MARKETING_SEARCH_VAL,CHANGE_MARKETING_SELECTED } from "@/store/mutation-type.js"
import { mapState, mapMutations } from "vuex"
import chooseDate from "@/pages_erpA8/components/choose-date.vue"
import customContent from "@/pages_erpA8/debt-receivable/childCpns/custom-content.vue"
import projectContent from "@/pages_erpA8/debt-receivable/childCpns/project-content.vue"
import marketingContent from "@/pages_erpA8/debt-receivable/childCpns/marketing-content.vue"
import chooseSalesman from "@/pages_erpA8/components/choose-salesman.vue"

export default {
    components: {
        chooseDate,
        chooseSalesman,
		customContent,
		projectContent,
		marketingContent
    },
    computed: {
        ...mapState("report", ["selectedSalesman", "startDate", "endDate","selectedCustoms","selectedProject","selectedMarketing"]),
		getFinalCustom() {
		    return this.selectedCustoms.map((item) => item.FullName).toString()
		},
		getProjectName() {
		    return this.selectedProject.map((item) => item.ProjectName).toString()
		},
		getMarketingName() {
		    return this.selectedMarketing.map((item) => item.OrganizationsName).toString()
		},
    },
    methods: {
        ...mapMutations("report", [CHANGE_DATE,CHANGE_CUSTOM_SEARCH_VAL, CHANGE_CUSTOM_SELECTED,CHANGE_PROJECT_SEARCH_VAL,CHANGE_PROJECT_SELECTED,CHANGE_MARKETING_SEARCH_VAL,CHANGE_MARKETING_SELECTED]),
        selDate(e) {
            if (e) {
                const [startDate, endDate] = e.split(",")
                this[CHANGE_DATE]({ startDate, endDate })
            }
        },
        handleSelectSalesman() {
            this.$refs.showRight.open()
        },
        handleReset() {
            this.$refs.showRight.close()
        },
        handleSure() {
            this.$refs.showRight.close()
        },
		openCustomDrawer() {
		    this.$refs.showRightCustom.open()
		},
		handleResetCustom() {
		    this[CHANGE_CUSTOM_SELECTED]([])
		    this[CHANGE_CUSTOM_SEARCH_VAL]("")
		    uni.$emit("resetCustom")
		    this.$emit("handleSureCustom")
		},
		handleSureCustom() {
		    this.$refs.showRightCustom.close()
		    this.$emit("handleSureCustom")
		},
		openProjectDrawer() {
		    this.$refs.showRightProject.open()
		},
		handleResetProject() {
		    this[CHANGE_PROJECT_SELECTED]([])
		    this[CHANGE_PROJECT_SEARCH_VAL]("")
		    uni.$emit("resetProject")
		    this.$emit("handleSureProject")
		},
		handleSureProject() {
		    this.$refs.showRightProject.close()
		    this.$emit("handleSureProject")
		},
		openMarketingDrawer() {
		    this.$refs.showRightMarketing.open()
		},
		handleResetMarketing() {
		    this[CHANGE_MARKETING_SELECTED]([])
		    this[CHANGE_MARKETING_SEARCH_VAL]("")
		    uni.$emit("resetMarketing")
		    this.$emit("handleSureMarketing")
		},
		handleSureMarketing() {
		    this.$refs.showRightMarketing.close()
		    this.$emit("handleSureMarketing")
		},
    },
}
</script>

<style lang="scss">
.sale-filter-container {
    height: 100%;
    padding: 88rpx 32rpx 72rpx;
    box-sizing: border-box;
    overflow: hidden;
    color: $color-gray-1;

    .title {
        margin-bottom: 48rpx;
        font-size: 34rpx;
    }

    .range-time {
        margin: 0 -32rpx;
        padding: 0 32rpx;
        border-bottom: 18rpx solid #f4f4f4;

        .text {
            margin-bottom: 40rpx;
            font-size: 28rpx;
        }
    }

    .sales-man {
        .text {
            margin: 24rpx 0;
            font-size: 28rpx;
        }

        .select-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 64rpx;
            padding: 0 24rpx;
            background: $color-white;
            border: 1rpx solid #b9c0d0;
            color: $color-gray-3;

            .has-salesman {
                color: $color-gray-1;
            }
        }
    }

    ::v-deep .uni-drawer {
        z-index: 1000;
    }
}
</style>
